<template>
  <div class="my-card">
    <div class="card-title no-select">
      <div v-if="!visible" @dblclick="dbTitle">{{ formItem?.displayName }}</div>
      <el-input v-else v-model="formItem.displayName" @blur="visible = false"></el-input>
      <el-icon size="20" @click="del">
        <Close />
      </el-icon>
    </div>
    <div class="card-body">
      <el-link v-for="item in formItem.properties" @click="readySelect">
        <el-text class="w-[180px]" truncated>
          {{ t("信号值") }}：&emsp;{{ item.expressions?.Literal }}
        </el-text>
      </el-link>
    </div>
    <div v-if="formItem?.type !== 'Finish'" class="add">
      <el-popover
        :width="300"
        placement="top-start"
        trigger="click"
      >
        <el-button icon="edit" @click="addApprove('Done')">审批</el-button>
        <el-button icon="chat-square" @click="addSend('Done')">抄送</el-button>
        <el-button icon="close" @click="addEnd('Done')">结束</el-button>
        <template #reference>
          <el-icon size="30">
            <CirclePlus />
          </el-icon>
        </template>
      </el-popover>
    </div>
  </div>
  <el-dialog :append-to-body="true" :model-value="dialog_visible"
             style=""
             title="修改名称" width="800"
             @close="close">
    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-position="top" label-width="auto">
      <el-form-item label="节点名称" prop="displayName">
        <el-input v-model="formItem.displayName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="name" prop="name">
        <el-input v-model="formItem.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="信号值" prop="signal">
        <el-input v-model="formData.signal" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit(ruleFormRef)">{{ t("确定") }}</el-button>
      </div>
    </template>
  </el-dialog>
  <Tag v-if="formItem?.next" :form-item="formItem.next"></Tag>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import Tag from "./Tag.vue";
import { useEventBus } from "@/hooks/event/useEventBus";
import { v4 as uuidv4 } from "uuid";
import { useI18n } from "@/hooks/web/useI18n";
import { FormInstance } from "element-plus";
import { rules } from "./data";

const { t } = useI18n("lims");
const bus = useEventBus();
const props = defineProps<{
  formItem: any
}>();

const dialog_visible = ref(false);
const visible = ref(false);
const formData = ref({
  signal: ""
});
const close = () => {
  dialog_visible.value = false;
};
const dbTitle = () => {
  if (props.formItem.type == "Workflow" || props.formItem.type == "Finish") return;
  visible.value = true;
};

const addApprove = (res: any) => {
  bus.emit("Add", {
    activityId: uuidv4(),
    sourceActivityId: props.formItem.activityId,
    displayName: "审批",
    type: "AuditActivity",
    outcome: res
  });
};
const addSend = (res: string) => {
  bus.emit("Add", {
    activityId: uuidv4(),
    sourceActivityId: props.formItem.activityId,
    displayName: "流程",
    type: "SignalReceived",
    outcome: res
  });
};
const addEnd = (res: string) => {
  bus.emit("Add", {
    activityId: uuidv4(),
    sourceActivityId: props.formItem.activityId,
    displayName: "结束",
    type: "Finish",
    outcome: res
  });
};
const del = () => {
  bus.emit("del", props.formItem.activityId);
};

const readySelect = () => {
  if (!Array.isArray(props.formItem.properties)) {
    props.formItem.properties = [{
      expressions: {
        Literal: ""
      },
      name: "Signal"
    }];
  }
  formData.value.signal = props.formItem.properties[0]?.expressions?.Literal ?? "";
  dialog_visible.value = true;
};

const ruleFormRef = ref<FormInstance>();
const submit = async (formEl: FormInstance | undefined): Promise<void> => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      if (!Array.isArray(props.formItem.properties)) {
        props.formItem.properties = [{
          expressions: {
            Literal: ""
          },
          name: "Signal"
        }];
      }
      props.formItem.properties[0].expressions.Literal = formData.value.signal;
      close();
    }
  });
};
</script>

<style lang="less" scoped>
.my-card {
  margin: 30px;
  box-shadow: 0px 0px 10px 3px #9f9f9f;
  width: 200px;
  border-radius: 6px;

  .card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px 6px 0 0;
    padding: 4px;
    color: aliceblue;
    background-color: #ff8c17;
  }

  .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
  }

  .add {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;

    :after {
      position: absolute;
      content: "";
      width: 1px;
      height: 60px;
      background: #bbbbbb;
    }
  }
}
</style>